<template>
 		<div class="wrap echarts_box2">
 	        <div class="section1">
 	          <img src="img/bigScreen/14.png" alt="" @click="home('/')"/>
 	        </div>
 	        <div class="section2">
 	        	<div class="system" :class="[item.activeClass]" v-for="(item,index) in leftSystem" :key="index" @click="link(item.URL)">
 	        		<span >{{item.name}}</span>
 	        	</div>
 	        </div>
 	        <div class="section3">
 	        	<img src="img/bigScreen/12.png" alt="" @click="home('/bigScreen')"/>
 	        </div>
 	        <div class="section4">
 	        	<div class="system" :class="[item.activeClass]" v-for="(item,index) in rightSystem" :key="index"  @click="link(item.URL)">
 	        		<span >{{item.name}}</span>
 	        	</div>        	
 	        </div>
 	        <div class="section5">
 	        	<span>{{timer}}</span>
 	        </div>
 		</div>
 	</template>
 	<script>
 		export default {
 			data() {
 				return {
 	               leftSystem:[
 	               {name:'油烟', URL:'http://172.16.1.202:8804/#/platform/lampblack',activeClass:''},
 	               {name:'污染源', URL:'http://172.16.1.202:8804/#/platform/contaminate',activeClass:''},
 	               {name:'放射源', URL:'http://172.16.1.202:8804/#/platform/radiate',activeClass:''},
 	               {name:'环境', URL:'http://172.16.1.202:8804/#/platform/environment',activeClass:''}
 	               
 	               ],
 	               rightSystem:[
 	               {name:'工况', URL:'http://172.16.1.202:8804/#/platform/working',activeClass:''},
 	               {name:'运维', URL:'http://172.16.1.202:8804/#/platform/operation',activeClass:''},
 	               {name:'园区', URL:'http://172.16.1.202:8804/#/platform/garden',activeClass:''},
 	               ],
 	               timer:null
 				}
 			},
 			mounted() {
 			  this.initHeader()	
 	          this.init()
 	          let that=this
 	          this.timer=setInterval(function(){
 	          	that.init()
 	          },1000)
 			},
 		    beforeDestroy() {
 		       clearInterval(this.timer)
 		    },			
 			methods: {
 			  home(url){
 			  	this.$router.push({
 			  		path:url
 			  	})
 			  },
 	          initHeader(){
 				  let path=this.$router.history.current.path
 				  if(path=='/bigScreen'){
 				  	for(var i=0;i<this.leftSystem.length;i++){
 				  		this.leftSystem[i].activeClass='system1'
 				  	}
 				  	for(var i=0;i<this.rightSystem.length;i++){
 				  		this.rightSystem[i].activeClass='system1'
 				  	}		  	
 				  }          	
 	          },
 			  link(url){
 			  	window.location.href=url
 			  },
 			  checkTime(i){   
 				if (i<10){
 					i="0" + i;
 				}   
 				return i;
 			  }, 
 	          init(){
 				var today=new Date();//定义日期对象   
 				var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年    
 				var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年    
 				var dd = today.getDate();//通过日期对象的getDate()方法返回年     
 				var hh=today.getHours();//通过日期对象的getHours方法返回小时   
 				var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟   
 				var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒   
 				// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09   
 				MM=this.checkTime(MM);
 				dd=this.checkTime(dd);
 				mm=this.checkTime(mm);   
 				ss=this.checkTime(ss);    
 				var day; //用于保存星期（getDay()方法得到星期编号）
 				if(today.getDay()==0)   day   =   "星期日 " 
 				if(today.getDay()==1)   day   =   "星期一 " 
 				if(today.getDay()==2)   day   =   "星期二 " 
 				if(today.getDay()==3)   day   =   "星期三 " 
 				if(today.getDay()==4)   day   =   "星期四 " 
 				if(today.getDay()==5)   day   =   "星期五 " 
 				if(today.getDay()==6)   day   =   "星期六 " 
 				this.timer=yyyy+"-"+MM +"-"+ dd +" "+ day +" "+hh+":"+mm+":"+ss         	    
 	          }
 			}
 		}
 	</script>
 	<style lang="scss" scoped>
 	    *{box-sizing: border-box;}
 	    
 	   
 	    .wrap{width: 100%;height: 100%;display: flex;justify-content: space-between;}
 	    .section1{width: 8.5%;padding:0 20px;display: flex;align-items: center;justify-content: center;
 	      img{width: 100%;}
 	    }
 	    .section2{width: 32%;display: flex;align-items: center;justify-content: space-around;
 	      .system{width: 150px;height: 50px;cursor: pointer;
 	      background-size: cover;display: flex;align-items: center;justify-content: center;
 	        span{color: #fff;font-size: 20px;}
 	      }
 	      .system:hover{background: url(/img/bigScreen/08.png)no-repeat;background-size: cover;}
 	      .system1{background: url(/img/bigScreen/07.png)no-repeat;}
 	      .system2{background: url(/img/bigScreen/08.png)no-repeat;}      
 	    }
 	    
 	    .section3{width: 24%;display: flex;align-items: center;justify-content: center;}
 	    .section4{width: 24%;display: flex;align-items: center;
 	      .system{width: 150px;height: 50px;cursor: pointer;
 	      background-size: 100% 100%;display: flex;align-items: center;justify-content: center;
 	        span{color: #fff;font-size: 20px;}
 	      }
 	      .system1{background: url(/img/bigScreen/03.png)no-repeat;}
 	      .system2{background: url(/img/bigScreen/04.png)no-repeat;}
 	      
 	      .system:hover{background: url(/img/bigScreen/04.png)no-repeat;background-size: 100% 100%;}    
 	    }
 	    .section5{width: 11.5%;color: #fff;display: flex;align-items: center;justify-content: center;}
 	</style>
